<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, orientation=landscape">
    <title>拖拉机纸牌游戏</title>
    <link rel="stylesheet" href="/static/css/room.css">
    <!-- Socket.IO客户端库加载 - 使用主要CDN和备用CDN -->
    <script>var socketIOLoaded = false;</script>
    <script id="socket-io-main" src="/static/js/socket.io.min.js"
        onload="socketIOLoaded = true;"></script>
    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入枚举定义文件 -->
    <script src="/static/js/message_enums.js"></script>
    <!-- 引入common.js文件 -->
    <script src="/static/js/common.js"></script>
    <!-- 游戏逻辑JavaScript -->
    <script src="/static/js/room.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 text-center">
                <!-- 用户设置模态框 -->
                <div id="user-setup-modal" class="modal" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">设置您的用户信息</h5>
                            </div>
                            <div class="modal-body">
                                <!-- 头像设置部分 -->
                                <div class="avatar-setup mb-4 text-center">
                                    <h6>选择或上传头像</h6>
                                    <div id="selected-avatar" class="mb-3">
                                        <img id="avatar-preview" src="/static/avatars/default.svg" alt="头像预览"
                                            style="width: 100px; height: 100px; border-radius: 0px;">
                                    </div>
                                    <!-- 预设头像选择 -->
                                    <div class="preset-avatars">
                                        <div class="avatar-grid"
                                            style="display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;">
                                            <!-- 预设头像将通过JavaScript动态生成 -->
                                        </div>
                                    </div>
                                    <!-- 上传头像 -->
                                    <div class="upload-avatar mt-3" style="display: flex; align-items: center;">
                                        <input type="file" id="avatar-upload" accept="image/*"
                                            style="margin-right: 10px;">
                                        <button id="upload-avatar-btn" class="btn btn-sm btn-secondary">上传</button>
                                    </div>
                                </div>

                                <!-- 用户名设置部分 -->
                                <div class="username-setup">
                                    <label for="username-input">请输入玩家昵称:</label>
                                    <div id="username-error"
                                        style="color: red; font-size: 12px; margin-bottom: 5px; display: none;"></div>
                                    <input type="text" id="username-input" class="form-control" placeholder="请输入用户名">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button id="confirm-user-setup" class="btn btn-primary">确定</button>
                                <button id="cancel-user-setup" class="btn btn-secondary">取消</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 游戏规则模态框 -->
                <div id="rules-modal" class="modal">
                    <div class="modal-content">
                        <h2>拖拉机纸牌游戏规则</h2>
                        <div class="rules-content">
                            <h3>基础规则</h3>
                            <ul>
                                <li>游戏使用一副完整的扑克牌（52张，不含大小王）</li>
                                <li>每个玩家发3张牌</li>
                                <li>玩家可以通过看牌、下注、跟注、加注、弃牌等操作进行游戏</li>
                            </ul>

                            <h3>牌型大小（从大到小）</h3>
                            <ol>
                                <li><strong>非同花235</strong>：三张牌为2、3、5且花色不全相同（在配置开启且存在豹子时最大）</li>
                                <li><strong>豹子</strong>：三张数字相同的牌</li>
                                <li><strong>相同花色的顺子（同花顺）</strong>：三张花色相同且数字连续的牌</li>
                                <li><strong>顺子</strong>：三张数字连续但花色不完全相同的牌</li>
                                <li><strong>相同花色的非顺子（金花）</strong>：三张花色相同但数字不连续的牌</li>
                                <li><strong>对子</strong>：三张牌中有两张数字相同的牌</li>
                                <li><strong>单牌</strong>：不符合以上任何牌型的牌</li>
                            </ol>

                            <h3>术语解释</h3>
                            <ul>
                                <li><strong>庄家</strong>：上一轮赢的玩家是下一轮的庄家，第一局或者赢家离开的情况随机选一个玩家为庄家。</li>
                                <li><strong>底分</strong>：游戏开始前每位玩家都要先投入游戏币。根据游戏房间的不同而数值不同。</li>
                                <li><strong>封顶</strong>：有两种情况会出现封顶
                                    <ul>
                                        <li>A）每个场设有允许付出的游戏币总和上限，达到或超过上限则系统自动开牌。</li>
                                        <li>B）当某个玩家所剩的游戏币不够下次付出时，则封顶，系统自动开牌。</li>
                                    </ul>
                                </li>
                                <li><strong>看牌</strong>：查看自己三张牌的花色和点数，看牌后的投注为明注。</li>
                                <li><strong>暗</strong>：不看牌投入游戏币。</li>
                                <li><strong>明</strong>：看牌后投入游戏币，明注后投入的游戏币翻倍。如果加的话是先加后翻倍。</li>
                                <li><strong>跟</strong>：投入和上一家一样数量的游戏币。自己是明牌就跟明；暗牌就跟暗。</li>
                                <li><strong>加</strong>：在上家投入游戏币的基础上再增加的游戏币。比如上家投入100，选择加入100，则共投入200。可以选择加的具体游戏币数值为3种，依场的设置不同而不同。
                                </li>
                                <li><strong>开牌</strong>：当可以投注的玩家只剩下两个人时，可以随时选择开牌，选开牌的玩家要付出当前需要付出游戏币的双倍数量，如果牌型大小相同，则先开牌的玩家判输。
                                </li>
                                <li><strong>放弃</strong>：放弃当前付出的所有游戏币，判输。</li>
                            </ul>

                            <h3>游戏流程</h3>
                            <ol>
                                <li><strong>投入底分</strong>：发牌之前大家先付出的游戏币。</li>
                                <li><strong>发牌</strong>：从庄家开始发牌，第一次开局的话，随机选择一个用户先发牌。每人发三张牌，牌面向下，为暗牌。</li>
                                <li><strong>游戏</strong>：庄家的顺时针的下一家先开始下注，其他玩家依次顺时针操作。轮到玩家操作时，玩家根据条件和判断形势可以进行加、跟、看牌、放弃、开牌等操作。
                                </li>
                                <li><strong>开牌</strong>：当最后游戏者只剩下2个人时，则可以随时选择开牌；或者有大于2人的用户，但是付出的游戏币已经达到封顶时，则由系统开牌。</li>
                                <li><strong>判断胜负</strong>：根据牌型比较规则来判断胜负。显示所有没有放弃的玩家的牌型。如果可以投入游戏币的玩家只剩下一个，则判此玩家为胜利玩家。
                                </li>
                            </ol>

                            <h3>特殊规则</h3>
                            <ul>
                                <li><strong>A23</strong>是最小的顺子</li>
                                <li><strong>非同花235</strong>可配置是否大于豹子</li>
                                <li>玩家离开或断线则直接视为放弃</li>
                                <li>每局结束后，玩家依次选择是否继续游戏</li>
                                <li>当房间中所有玩家都离开或断线后，再有玩家进入，视为新的开始</li>
                            </ul>
                        </div>
                        <div class="modal-buttons">
                            <button id="close-rules-modal-btn">关闭</button>
                        </div>
                    </div>
                </div>

                <!-- 游戏继续选择模态框 -->
                <div id="continue-modal" class="modal">
                    <div class="modal-content">
                        <h2>游戏结束</h2>
                        <p id="winner-message">恭喜玩家XXX获胜！赢得了XXX金币！</p>
                        <div class="modal-buttons">
                            <button id="continue-yes-btn" class="btn btn-primary">继续游戏</button>
                            <button id="continue-no-btn" class="btn">退出</button>
                        </div>
                    </div>
                </div>

                <!-- 房间列表模态框 -->
                <div id="room-list-modal" class="modal">
                    <div class="modal-content" style="max-width: 800px; width: 90%;">
                        <h2>房间列表</h2>
                        
                        <!-- 房间筛选区域 -->
                        <div class="room-filters mb-3">
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="filter-room-name">房间名称:</label>
                                    <input type="text" id="filter-room-name" class="form-control" placeholder="输入房间名称">
                                </div>
                                <div class="col-md-4">
                                    <label for="filter-player-count">玩家数量:</label>
                                    <select id="filter-player-count" class="form-control">
                                        <option value="">不限</option>
                                        <option value="1">1人</option>
                                        <option value="2">2人</option>
                                        <option value="3">3人</option>
                                        <option value="4">4人</option>
                                        <option value="5">5人</option>
                                        <option value="6">6人</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="filter-room-status">房间状态:</label>
                                    <select id="filter-room-status" class="form-control">
                                        <option value="">不限</option>
                                        <option value="waiting">等待中</option>
                                        <option value="playing">游戏中</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-md-12">
                                    <button id="apply-filters-btn" class="btn btn-primary">应用筛选</button>
                                    <button id="reset-filters-btn" class="btn btn-secondary">重置</button>
                                    <button id="refresh-room-list-btn" class="btn btn-info">刷新列表</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 房间列表 -->
                        <div class="room-list-container">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>房间名称</th>
                                        <th>房主</th>
                                        <th>玩家数量</th>
                                        <th>房间状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="room-list-tbody">
                                    <!-- 房间列表将通过JavaScript动态生成 -->
                                </tbody>
                            </table>
                            <div id="no-rooms-message" class="text-center" style="display: none;">
                                暂无可用房间
                            </div>
                        </div>
                        
                        <div class="modal-buttons">
                            <button id="close-room-list-btn" class="btn btn-secondary">关闭</button>
                        </div>
                    </div>
                </div>

                <!-- 创建房间模态框 -->
                <div id="create-room-modal" class="modal">
                    <div class="modal-content">
                        <h2>创建房间</h2>
                        <div class="create-room-form">
                            <div class="mb-3">
                                <label for="new-room-name">房间名称:</label>
                                <input type="text" id="new-room-name" class="form-control" placeholder="请输入房间名称">
                            </div>
                            
                            <div class="mb-3">
                                <label for="new-room-max-players">最大玩家数:</label>
                                <select id="new-room-max-players" class="form-control">
                                    <option value="2">2人</option>
                                    <option value="3">3人</option>
                                    <option value="4">4人</option>
                                    <option value="5">5人</option>
                                    <option value="6" selected>6人</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <h5>游戏规则设置</h5>
                                <div class="form-check mb-2">
                                    <input type="checkbox" id="new-room-235-greater" class="form-check-input">
                                    <label class="form-check-label" for="new-room-235-greater">
                                        非同花235大于豹子
                                    </label>
                                </div>
                                
                                <div class="mb-2">
                                    <label for="new-room-initial-coins">初始金币数:</label>
                                    <input type="number" id="new-room-initial-coins" class="form-control" min="100" max="10000" value="1000">
                                </div>
                                
                                <div class="mb-2">
                                    <label for="new-room-base-bet">底注数量:</label>
                                    <input type="number" id="new-room-base-bet" class="form-control" min="1" max="100" value="10">
                                </div>
                                
                                <div class="mb-2">
                                    <label for="new-room-max-bet">单注封顶金币数:</label>
                                    <input type="number" id="new-room-max-bet" class="form-control" min="1" max="10000" value="1000">
                                </div>
                                
                                <div class="mb-2">
                                    <label for="new-room-max-hands">手数封顶数:</label>
                                    <input type="number" id="new-room-max-hands" class="form-control" min="1" max="100" value="10">
                                </div>
                                
                                <div class="mb-2">
                                    <label for="new-room-max-pot-amount">当局底池最大数额:</label>
                                    <input type="number" id="new-room-max-pot-amount" class="form-control" min="100" max="1000000" step="100" value="10000">
                                </div>
                            </div>
                        </div>
                        <div class="modal-buttons">
                            <button id="confirm-create-room-btn" class="btn btn-primary">创建房间</button>
                            <button id="cancel-create-room-btn" class="btn btn-secondary">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="game-area game-lobby">
            <div id="game-table" class="border border-primary rounded-lg p-4 bg-light">
                <div class="table-inner">
                    <!-- 座位布局 -->
                    <div class="seat seat-0">
                        <div class="seat-content">
                            <div class="seat-number">座位1</div>
                            <div class="player-info"></div>
                        </div>
                    </div>
                    <div class="seat seat-1">
                        <div class="seat-content">
                            <div class="seat-number">座位2</div>
                            <div class="player-info"></div>
                        </div>
                    </div>
                    <div class="seat seat-2">
                        <div class="seat-content">
                            <div class="seat-number">座位3</div>
                            <div class="player-info"></div>
                        </div>
                    </div>
                    <div class="seat seat-3">
                        <div class="seat-content">
                            <div class="seat-number">座位4</div>
                            <div class="player-info"></div>
                        </div>
                    </div>
                    <div class="seat seat-4">
                        <div class="seat-content">
                            <div class="seat-number">座位5</div>
                            <div class="player-info"></div>
                        </div>
                    </div>
                    <div class="seat seat-5">
                        <div class="seat-content">
                            <div class="seat-number">座位6</div>
                            <div class="player-info"></div>
                        </div>
                    </div>

                    <!-- 牌桌标题 -->
                    <h1 id="table-title">拖拉机纸牌</h1>

                    <!-- 牌桌中心 -->
                    <div class="table-center">
                        <div id="game-status" class="text-center">等待游戏开始...</div>
                    </div>
                </div>
            </div>

            <div id="status-panel" class="status-panel">
                <div class="status-panel-body">
                    <!-- 当前玩家面板 -->
                    <div id="current-player" class="collapsible-panel">
                        <div class="collapsible-header">
                            <h4>玩家信息</h4>
                            <span class="collapsible-icon">▼</span>
                        </div>
                        <div class="collapsible-content">
                            <p id="player-name">未设置</p>
                            <p id="player-coins">金币: 0</p>
                            <p id="player-status">状态: 观众</p>
                        </div>
                    </div>

                    <!-- 房间信息面板 -->
                    <div id="room-info" class="collapsible-panel">
                        <div class="collapsible-header">
                            <h4>房间信息</h4>
                            <span class="collapsible-icon">▼</span>
                        </div>
                        <div class="collapsible-content">
                            <p>房主玩家昵称: <span id="room-owner">无</span></p>
                            <p>玩家数: <span id="player-count">0</span>/6</p>
                        </div>
                    </div>

                    <!-- 控制面板 -->
                    <div id="control-panel" class="collapsible-panel">
                        <div class="collapsible-header">
                            <h4>控制面板</h4>
                            <span class="collapsible-icon">▼</span>
                        </div>
                        <div class="collapsible-content">
                            <button id="stand-up-btn" class="btn btn-danger mb-2" disabled>起身</button>
                            <button id="ready-btn" class="btn btn-success mb-2" disabled>准备就绪</button>
                            <button id="view-rules-btn" class="btn btn-info mb-2">查看规则</button>
                            <button id="view-room-settings-btn" class="btn btn-info mb-2">查看房间设置</button>
                            <button id="room-list-btn" class="btn btn-primary mb-2">房间列表</button>
                            <button id="create-room-btn" class="btn btn-success mb-2">创建房间</button>
                        </div>
                    </div>

                    <!-- 规则设置面板 -->
                    <div id="rules-settings-modal" class="modal">
                        <div class="modal-content">
                            <h2>房间设置</h2>
                            <div class="settings-content">
                                <div class="mb-2">
                                    <label class="form-check-label">
                                        <input type="checkbox" id="setting-235-greater" class="form-check-input">
                                        非同花235大于豹子
                                    </label>
                                </div>
                                <div class="mb-2">
                                    <label for="setting-initial-coins">初始金币数:</label>
                                    <input type="number" id="setting-initial-coins" class="form-control" min="100"
                                        max="10000">
                                </div>
                                <div class="mb-2">
                                    <label for="setting-base-bet">底注数量:</label>
                                    <input type="number" id="setting-base-bet" class="form-control" min="1" max="100">
                                </div>
                                <div class="mb-2">
                                    <label for="setting-max-bet">单注封顶金币数:</label>
                                    <input type="number" id="setting-max-bet" class="form-control" min="1" max="10000">
                                </div>
                                <div class="mb-2">
                                    <label for="setting-max-hands">手数封顶数:</label>
                                    <input type="number" id="setting-max-hands" class="form-control" min="1" max="100">
                                </div>
                                <div class="mb-2">
                                    <label for="setting-max-pot-amount">当局底池最大数额:</label>
                                    <input type="number" id="setting-max-pot-amount" class="form-control" min="100"
                                        max="1000000" step="100">
                                </div>
                            </div>
                            <div class="modal-buttons">
                                <button id="save-settings-btn" class="btn btn-primary">保存设置</button>
                                <button id="close-settings-modal-btn" class="btn btn-secondary">关闭</button>
                            </div>
                        </div>
                    </div>

                    <!-- 查看房间设置模态框 - 移出owner-controls使其对所有玩家可见 -->
                    <div id="view-room-settings-modal" class="modal">
                        <div class="modal-content">
                            <h2>房间设置</h2>
                            <div class="settings-content">
                                <div class="mb-2">
                                    <p><strong>非同花235大于豹子:</strong> <span id="view-setting-235-greater">否</span></p>
                                </div>
                                <div class="mb-2">
                                    <p><strong>初始金币数:</strong> <span id="view-setting-initial-coins">1000</span></p>
                                </div>
                                <div class="mb-2">
                                    <p><strong>底注数量:</strong> <span id="view-setting-base-bet">1</span></p>
                                </div>
                                <div class="mb-2">
                                    <p><strong>单注封顶金币数:</strong> <span id="view-setting-max-bet">无限制</span></p>
                                </div>
                                <div class="mb-2">
                                    <p><strong>手数封顶数:</strong> <span id="view-setting-max-hands">无限制</span></p>
                                </div>
                                <div class="mb-2">
                                    <p><strong>当局底池最大数额:</strong> <span id="view-setting-max-pot-amount">1000</span></p>
                                </div>
                            </div>
                            <div class="modal-buttons">
                                <button id="close-view-settings-modal-btn" class="btn btn-secondary">关闭</button>
                            </div>
                        </div>
                    </div>

                    <!-- 房主控制面板 -->
                    <div id="owner-controls" class="collapsible-panel" style="display: none;">
                        <div class="collapsible-header">
                            <h4>房主控制</h4>
                            <span class="collapsible-icon">▼</span>
                        </div>
                        <div class="collapsible-content">
                            <button id="edit-room-settings-btn" class="btn btn-warning mb-2">查看/修改房间设置</button>

                            <!-- 规则设置结果面板（非房主玩家） -->
                            <div id="settings-update-modal" class="modal">
                                <div class="modal-content">
                                    <h2>规则更新通知</h2>
                                    <div class="settings-content">
                                        <p id="settings-update-message" class="mb-4">房主更改了房间设置</p>
                                        <div class="mb-2">
                                            <p><strong>非同花235大于豹子:</strong> <span
                                                    id="update-setting-235-greater">否</span>
                                            </p>
                                        </div>
                                        <div class="mb-2">
                                            <p><strong>初始金币数:</strong> <span
                                                    id="update-setting-initial-coins">1000</span>
                                            </p>
                                        </div>
                                        <div class="mb-2">
                                            <p><strong>底注数量:</strong> <span id="update-setting-base-bet">1</span></p>
                                        </div>
                                        <div class="mb-2">
                                            <p><strong>单注封顶金币数:</strong> <span id="update-setting-max-bet">无限制</span>
                                            </p>
                                        </div>
                                        <div class="mb-2">
                                            <p><strong>手数封顶数:</strong> <span id="update-setting-max-hands">无限制</span>
                                            </p>
                                        </div>
                                        <div class="mb-2">
                                            <p><strong>当局底池最大数额:</strong> <span
                                                    id="update-setting-max-pot-amount">1000</span></p>
                                        </div>
                                    </div>
                                    <div class="modal-buttons">
                                        <button id="close-settings-update-modal-btn"
                                            class="btn btn-secondary">我知道了</button>
                                    </div>
                                </div>
                            </div>
                            <button id="show-settings-modal-btn" class="btn btn-primary mb-2">规则设置</button>
                            <div id="players-to-kick" class="mb-2">
                                <label for="kick-player-select">选择要踢出的玩家:</label>
                                <select id="kick-player-select" class="form-control">
                                    <option value="">无</option>
                                </select>
                            </div>
                            <button id="kick-player-btn" class="btn btn-warning mb-2">踢出玩家</button>
                            <button id="start-game-btn" class="btn btn-success" disabled>开始游戏</button>
                        </div>
                    </div>

                    <!-- 游戏控制面板 - 动态定位在当前玩家座位右侧，支持拖动 -->
                    <div id="game-controls"
                        style="position: absolute; display: none; z-index: 20; background-color: rgba(255, 255, 255, 0.95); border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
                        <!-- 可拖动的标题栏 -->
                        <div id="controls-header"
                            style="cursor: move; background-color: #f8f9fa; padding: 10px 15px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: 1px solid #dee2e6;">
                            <h4 class="mb-0">游戏控制 <small style="color: #6c757d; font-size: 12px;">(可拖动)</small></h4>
                        </div>
                        <div style="padding: 15px;">
                            <button id="look-cards-btn" class="btn btn-info btn-block mb-2">看牌</button>
                            <button id="showdown-btn" class="btn btn-warning btn-block mb-2" style="display: none;">开牌</button>
                            <button id="fold-btn" class="btn btn-danger btn-block mb-2">弃牌</button>
                            <button id="call-btn" class="btn btn-primary btn-block mb-2">跟注</button>
                            <button id="raise-btn" class="btn btn-success btn-block mb-2">加注</button>
                            <div class="mb-2">
                                <input type="number" id="bet-amount" class="form-control" placeholder="下注金额">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

</body>

</html>